﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chirpper Application</title>

    <!--<link href="Content/bootstrap.css" rel="stylesheet" />-->

    <link href="Style.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://nabilchirps.firebaseio-demo.com/.json"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <!--
    This demo has 2 full CRUD scripts. Be sure to change the paths/firebase urls as needed.
        - myToDos_v1.js         - global scope
        - myToDos_v2.js         - local scope via IIFE
        - myToDos_v2_other.js   - local scope via IIFE, rendering on the same page

    -->
</head>
<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">

                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Cobra</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#">Chirps</a>
                            </li>
                            <li>
                                <a href="#">Favorites</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Timelines<strong class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">Action</a>
                                    </li>
                                    <li>
                                        <a href="#">Another action</a>
                                    </li>
                                    <li>
                                        <a href="#">Something else here</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="#">Separated link</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" />
                            </div> <button type="submit" class="btn btn-default">Search</button>
                        </form>
                    </div>

                </nav>
            </div>

            <!-- Page Content -->
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4 column">
                            <div id="profile" style="background-color:#a1cfd9">
                                <h2>
                                    Profile<br />
                                </h2>
                                <img src="" class="img-rounded">

                                <ul>
                                    <li>Username: Nabil</li>
                                    <li>Name: Nabil Rhiati</li>
                                    <li>Age: 125</li>
                                    <li>Howntown: Austin,TX</li>
                                </ul>
                            </div>

                            <div id="friends" style="background-color:#a1cfd9">
                                <h2>Friends</h2>
                                <ul>
                                    <li>
                                        <p>Username: CrazyAZN</p>
                                        <img src="http://s2.quickmeme.com/img/3e/3e893cb199219590fc87a39d5bd6008ed5c8852291acde1ce1ceae1d20e76add.jpg" class="img-rounded">

                                    </li>
                                    <li>
                                        <p>Username: cdrgirl</p>
                                        <img src="http://www.phootoscelebrities.com/wp-content/uploads/2014/06/Angelina-Jolie-wallpapers.jpg" class="img-rounded">
                                    </li>
                                    <li>
                                        <p>Username: Mike</p>
                                        <img src="http://salmonriverresources.com/wp-content/uploads/2015/03/hawaiian-islands-beach-sunset-GwWz-50x50.jpg" class="img-rounded">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <span class="glyphicon glyphicon-comment"></span> All Chirps
                                </div>
                                <div class="panel-body">
                                    <ul class="chat">
                                        <li class="left clearfix">
                                            <span class="chat-img pull-left">
                                                <img src="" class="img-circle">
                                            </span>
                                            <div class="chat-body clearfix">
                                                <div class="header">
                                                    <strong class="primary-font">Nabil</strong>
                                                    <small class="pull-right text-muted">
                                                        <span id="timeSpan" class="glyphicon glyphicon-time"></span>
                                                        12 mins ago
                                                    </small>
                                                </div>
                                                <p>
                                                    Hello, Everyone in Coder Camps
                                                </p>
                                            </div>
                                        </li>

                                        <li id="myChirp" class="left clearfix"></li>
                                    </ul>
                                </div>
                                <div class="panel-footer">
                                    <div class="input-group">
                                        <input id="todotext" type="text" class="form-control input-group-sm" placeholder="Username" />
                                        <input id="todocompleted" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" id="addtodo" onclick="doaddtodo()">Chirp</button>
                                            
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- /#page-content-wrapper -->
        </div>
    </div>

    <div class="row clearfix">
        <div class="">
            <div class="row-fixed">
               
                <div class="col-lg-8">
                    <!-- tiny only nav-->
                    <div class="well">
                        <!-- Logic for displaying CHIRPS line 74 HTML -->
                        <form class="form-horizontal" role="form">
                            <h4>Send Message!</h4>
                            <div class="form-group" style="padding:14px;">
                                <textarea onkeypress="onKeyPress(event)" id="chirp-input" class="form-control" placeholder="Update your status"></textarea>
                            </div>
                            <button onclick="createTweet()" class="btn btn-primary pull-right" type="button">Send Chirp!</button><ul class="list-inline"><li>
                        </form>
                    </div>
                    <div class="col-lg-pull-8 ">
                        <!-- Logic for displaying FRIENDS line 91 HTML -->
                        <div class="panel panel-default">
                            <div class="panel-heading"><h4>Most Recent Chirps</h4><a href="#">Chirps<span class="badge" id="newChirps"></span></a></div>
                            <!-- Display Chirps-->
                            <div id="chirp-display" class="panel-body"></div>
                            <!-- End Display Chirps-->
                        </div>
                        <!-- End Friends DIV-->
                    </div>
                </div>
            </div>
            <!--Modal Fiends Profile-->
        </div>
    </div>
    <!--Needs to be unique to the CRUD script-->
    <div id="ToDoList"> </div>

    <hr />
    <script src="Scripts/moment.js"></script>
    <script src="Chatapp.js"></script>
</body>
</html>